<template>
  <!-- 材料题 类名meterail 添加material-box-->
  <div class="problem-box short material p12">
    <div class="material-box" ref="material_box">
      <div class="material-title">
        <h5>背景材料</h5>
      </div>
      <div class="material-content">
        <p class="richText" v-html="details.materialContent"></p>
      </div>
    </div>
    <div class="peoblem-mains" ref="peoblem_mains">
      <div
        class="drag-btn"
        v-on:touchstart.stop="move_start($event)"
        v-on:touchmove.stop="moving($event)"
      ></div>
      <div class="problem-bodys" ref="peoblem_bodys">
        <single-problem
          v-if="details.type_id == 1"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
          :is_test="is_test"
        ></single-problem>
        <multi-problem
          v-if="details.type_id == 2"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
          :is_test="is_test"
        ></multi-problem>
        <short-problem
          v-if="details.type_id == 3"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
        ></short-problem>
        <defiend-problem
          v-if="details.type_id == 4"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
          :is_test="is_test"
        ></defiend-problem>
        <blanks-problem
          v-if="details.type_id == 5"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
          :is_test="is_test"
        ></blanks-problem>
        <judge-problem
          v-if="details.type_id == 6"
          :details="details"
          :show_answer="show_answer"
          :show_note="show_note"
          :is_test="is_test"
        ></judge-problem>
      </div>
    </div>
  </div>
</template>
<script>
import SingleProblem from "./SingleProblem";
import MultiProblem from "./MultiProblem";
import ShortProblem from "./ShortProblem";
import DefiendProblem from "./DefiendProblem";
import BlanksProblem from "./BlanksProblem";
import judgeProblem from "./judgeProblem";
import MaterialProblem from "./MaterialProblem";
import NoteModal from "./NoteModal";
import ProblemCard from "./ProblemCard";
import ProblemMenu from "./ProblemMenu";
export default {
  components: {
    SingleProblem,
    MultiProblem,
    ShortProblem,
    DefiendProblem,
    BlanksProblem,
    judgeProblem,
    MaterialProblem,
    NoteModal,
    ProblemCard,
    ProblemMenu
  },
  props: {
    // 题目详情
    details: {
      type: Object,
      default: ()=>{}
    },
    //笔记显示
    show_note: {
      type: Boolean,
      defaule: false
    },
    // 答案显示
    show_answer: {
      type: Boolean,
      defaule: false
    },
    //判断是否为考试
    is_test:{
      type : Boolean,
      default : false
    }
    
  },
  data() {
    return {
      //材料题拖拽位置
      startY: 0,
      curPoint: 0,
      offsettop: 0,
      moveEndY: 0
    };
  },
  mounted() {},
  methods: {
    // 拖拽开始
    move_start(e) {
      e.preventDefault();
      // console.log(e);
      //初始坐标
      this.startY = e.changedTouches[0].pageY;
      // console.log("起点坐标" + this.startY);
      this.offsettop = this.$refs.peoblem_mains.offsetTop;
      // console.log("距离顶部" + this.offsettop);
    },
    //拖拽中
    moving(e) {
      e.preventDefault();
      this.$nextTick(() => {
        var outHeight = document.documentElement.clientHeight;
        let htmlFontSize = parseInt(
          window.getComputedStyle(document.getElementsByTagName("html")[0])
            .fontSize
        );
        //当前坐标点
        this.curPoint = e.changedTouches[0].pageY;
        // console.log("移动坐标" + this.curPoint);
        var disY = this.curPoint - this.startY;
        var top = this.offsettop + disY;
        
        if (top > (htmlFontSize / 100) * 360) {
          top = (htmlFontSize / 100) * 360;
        }
        if (top < (htmlFontSize / 100) * 200) {
          // console.log("上滑");
          top = (htmlFontSize / 100) * 200;
        }
        console.log(this.curPoint,this.startY,this.offsettop)
        // console.log(this.$refs.peoblem_mains.style);
        this.$refs.peoblem_mains.style.top = top + "px";
        // $(this).parent('.peoblem-main').css('top', top)
        var boxTop = parseFloat(this.$refs.peoblem_mains.style.top);
        var conheight = outHeight - boxTop;
        this.$refs.peoblem_bodys.style.height =
          conheight - (htmlFontSize / 100) * 40 + "px";
        this.$refs.material_box.style.height =
          boxTop - (htmlFontSize / 100) * 60 + "px";
        // $(this).siblings('.problem-body').css('height', conheight - parseInt($("html").css('font-size')) / 100 * 40)
        // $(this).parent('.peoblem-main').siblings('.material-box').css('height', boxTop - parseInt($("html").css('font-size')) / 100 * 60)
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/css/problem.css";
</style>


